﻿@page

<!DOCTYPE html>
<html>
<head>
    <title>二维码扫描测试</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            text-align: center;
        }
    </style>
    <script src="/common/jquery-1.10.2.js"></script>
    <script>
        //这段代 主要是获取摄像头的视频流并显示在Video 签中
        var constraints = { "video": true, audio: false };
        var canvas;
        var context;
        var video;
        var log;

        //打印内容到页面
        function appendToBody(content) {
            log.value = content;
        }

        //抓屏获取图像流，并上传到服务器
        function decode() {
            context.drawImage(video, 0, 0, 320, 320);
            $.ajax({
                type: 'post',
                url: '/api/qr/decode',
                data: { data: canvas.toDataURL("image/jpeg") },
                cache: false,
                timeout: 10000,
                success: function (res) {
                    if (res.Result)
                        appendToBody(res.Data);
                    else
                        appendToBody('未识别二维码，请重新扫描！');
                },
                error: function (err) {
                    appendToBody('扫描失败' + err);
                }
            });
        }

        function alertError(error) {
            if (error.PERMISSION_DENIED) {
                alert('用户拒绝了浏览器请求媒体的权限', '提示');
            } else if (error.NOT_SUPPORTED_ERROR) {
                alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');
            } else if (error.MANDATORY_UNSATISFIED_ERROR) {
                alert('指定的媒体类型未接收到媒体流', '提示');
            } else {
                alert('系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试', '提示');
            }
        };

        $(document).ready(function () {
            canvas = document.getElementById("canvas");
            context = canvas.getContext("2d");
            video = document.getElementById("video");
            log = document.getElementById("log");

            //获取媒体的兼容代码，目前只支持（Firefox,Chrome,Opera）
            if (navigator.getUserMedia) {
                //qq浏览器不支持
                if (navigator.userAgent.indexOf('MQQBrowser') > -1) {
                    alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');
                    return false;
                }
                appendToBody('getUserMedia');
                navigator.getUserMedia(constraints, function (stream) {
                    //video.src = window.webkitURL.createObjectURL(stream);
                    video.srcObject = stream;
                    video.play();
                }, alertError);
            }
            else if (navigator.webkitGetUserMedia) {
                appendToBody('webkitGetUserMedia');
                navigator.webkitGetUserMedia(constraints, function (stream) {
                    //video.src = window.webkitURL.createObjectURL(stream);
                    video.srcObject = stream;
                    video.play();
                }, alertError);
            }
            else if (navigator.mozGetUserMedia) {
                appendToBody('mozGetUserMedia');
                navigator.mozGetUserMedia(constraints, function (stream) {
                    //video.src = window.URL.createObjectURL(stream);
                    video.srcObject = stream;
                    video.play();
                }, alertError);
            }
            else if (navigator.msGetUserMedia) {
                appendToBody('msGetUserMedia');
                navigator.msGetUserMedia(constraints, function (stream) {
                    $(document).scrollTop($(window).height());
                    //video.src = window.URL.createObjectURL(stream);
                    video.srcObject = stream;
                    video.play();
                }, alertError);
            } else {
                alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器');
            }
        });
    </script>
</head>
<body bgcolor="#ccc">
    <video id="video" width="320" height="320" autoplay="autoplay" loop="loop" src="/common/loading.mp4"></video>
    <hr />
    <canvas id="canvas" width="320" height="320"></canvas>
    <hr />
    <button style="height:50px; width:120px;" onclick="decode()">开始识别</button>
    <hr />
    <textarea id="log" style="height:320px; width:100%;"></textarea>
</body>
</html>
